<template lang="pug">
transition(name="fade")
  .preview(v-show="carousel.show", @click="close($event)")
    .preview-container
      el-carousel(height="720px" :initial-index="carousel.defaultIndex || 0")
        el-carousel-item(v-for="item in carousel.list", :key="item.fileId")
          .carousel-img(ref="carousel", :style="{ 'background-image': `url(${item.fileUrl})` }") 
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'previewCarousel',
  computed: {
    ...mapState({
      carousel: state => state.modal.previewCarousel
    })
  },
  data () {
    return {}
  },
  methods: {
    ...mapActions([
      'changeCarousel'
    ]),
    close (e) {
      if (e.target !== this.$refs.carousel[0] && e.target !== this.$refs.last && e.target !== this.$refs.next) {
        this.changeCarousel({list: [], show: false})
      }
    }
  }
} 
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  opacity: 0;
  transform: scale(1.2)
}
.preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  display: table;
  transition: all .2s ease;
  z-index: 9999;
  .preview-container {
    width: 720px;
    height: 720px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    .el-carousel {
      width: 100%;
      height: 100%;
    }
  }
}
.carousel-img {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
